<template>
  <div class="t-progress-bar" @click="handleClick">
    <div class="t-progress-bar__title"><slot name="title"></slot></div>
    <div class="t-progress-bar__wrapper" :class="`t-progress-bar__wrapper--${innerStatus}`">
      <div class="t-progress-bar__text">
        <div class="t-progress-bar__text__title"><slot name="time"></slot></div>
      </div>
      <div class="t-progress-bar__inner" :class="`t-progress-bar__inner--${innerStatus}`" :style="innerStyle"></div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      percent: {
        type: Number,
        default: 0,
      },
    },
    computed: {
      innerStyle() {
        if (this.percent >= 100) {
          return 'width: 100%';
        }
        return `width: ${this.percent}%`;
      },
      innerStatus() {
        if (this.percent >= 100) {
          return 'success';
        }
        return 'primary';
      },
    },
    methods: {
      handleClick() {
        this.$emit('click');
      },
    },
  };
</script>

<style>
</style>